import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Modal, Row, Col, Input, message,
} from 'antd';
import { FormComponentProps } from '@ant-design/compatible/es/form';

interface AddWhiteListProps extends FormComponentProps {
  AddVisible: boolean;
  FetchAction: (typeName: string, payload: any) => void;
  ChangeAddWhiteListModal: (addVisible: boolean) => void;
}

interface AddWhiteListState {

}

class AddWhiteListElem extends Component<AddWhiteListProps, AddWhiteListState> {
  state = {

  }

  handleAddWhiteList = () => {
    const { FetchAction, form: { validateFields }, ChangeAddWhiteListModal } = this.props;
    validateFields((errors, values) => {
      if (!errors) {
        const verPhone = /^1[3456789]\d{9}$/;
        if (!verPhone.test(values.consigneePhone)) {
          message.error('手机号格式错误');
        } else {
          FetchAction('addWhiteList', values);
          ChangeAddWhiteListModal(false);
        }
      }
    });
  }

  render() {
    const {
      AddVisible,
      ChangeAddWhiteListModal,
      form: { getFieldDecorator },
    } = this.props;

    return (
      <Modal
        visible={AddVisible}
        title="添加白名单"
        destroyOnClose
        width={400}
        onOk={this.handleAddWhiteList}
        onCancel={() => ChangeAddWhiteListModal(false)}
      >
        <Form hideRequiredMark className="tableListForm">
          <Row gutter={24}>
            <Col span={24}>
              <Form.Item label="柜体编号" colon={false}>
                {getFieldDecorator('cabinetCode', ({
                  initialValue: '',
                  rules: [{ required: true, message: '请输入柜体编号' }],
                }))(
                  <Input placeholder="请输入" />,
                )}
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="　手机号" colon={false} className="marginB0Import">
                {getFieldDecorator('consigneePhone', ({
                  initialValue: '',
                  rules: [{ required: true, message: '请输入手机号' }],
                }))(
                  <Input type="number" placeholder="请输入" />,
                )}
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}

export default Form.create<AddWhiteListProps>()(AddWhiteListElem);
